<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="css/webbase.css">
    <link rel="stylesheet" href="css/pages-seckillOrder.css">
    <title>地址管理</title>
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="css/common.css">
    <link rel="stylesheet" type="text/css" href="css/index.css">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<div id="app">
    <!--引入头部-->
    <div id="header">
    </div>
    <div class="container-fluid">
        <!--header-->
        <div id="account">
            <div class="py-container">
                <div class="yui3-g home">
                    <!--左侧列表-->
                    <!-- <div id="home_left"></div>-->

                    <!--左侧列表-->
                    <div class="yui3-u-1-6 list">

                        <div class="person-info">
                            <div class="person-photo" style="text-align: center">
                                <img v-if="user.pic!=null" :src="user.pic" width="160px" class="img-circle" alt="">
                                <img v-if="user.pic==null" src="/img/girl.png" width="160px" class="img-circle" alt="">
                            </div>
                            <div class="clearfix"></div>
                        </div>
                        <div class="list-items">
                            <dl>
                                <dt><i>·</i> 设置</dt>
                                <dd><a href="home_index.html">个人信息</a></dd>
                                <dd><a href="home_pic.html">上传头像</a></dd>
                                <dd><a href="home_address.html">地址管理</a></dd>
                            </dl>
                            <dl>
                                <dt><i>·</i> 订单中心</dt>
                                <dd><a href="home_orderlist.html">我的订单</a></dd>
                                <dd><a href="javascript:">待付款</a></dd>
                                <dd><a href="javascript:">待发货</a></dd>
                                <dd><a href="javascript:">待收货</a></dd>
                                <dd><a href="javascript:">待评价</a></dd>
                            </dl>
                            <dl>
                                <dt><i>·</i> 我的中心</dt>
                                <dd><a href="javascript:">我的收藏</a></dd>
                                <dd><a href="javascript:">我的足迹</a></dd>
                            </dl>
                            <dl>
                                <dt><i>·</i> 物流消息</dt>
                            </dl>

                        </div>
                    </div>
                    <!--右侧主内容-->
                    <div class="yui3-u-5-6 order-pay">
                        <div class="body userAddress">
                            <div class="address-title">
                                <span class="title">地址管理</span>
                                <a data-toggle="modal" data-target="#addressModel" data-keyboard="false"   class="sui-btn  btn-info add-new">添加新地址</a>
                                <span class="clearfix"></span>
                            </div>
                            <div class="address-detail">
                                <table class="sui-table table-bordered">
                                    <thead>
                                    <tr>
                                        <th>姓名</th>
                                        <th>地址</th>
                                        <th>联系电话</th>
                                        <th>操作</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr>
                                        <td>刘田田</td>
                                        <td>北京 北京市 海淀区 上地街道东北旺西路8号中关村软件园9号楼</td>
                                        <td>12345678901</td>
                                        <td>
                                            <a href="#">编辑</a>
                                            <a href="#">删除</a>
                                            <a href="#">设为默认</a>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>沈沉</td>
                                        <td>北京 北京市 海淀区 上地街道东北旺西路8号中关村软件园9号楼</td>
                                        <td>12345678901</td>
                                        <td>
                                            <a href="#">编辑</a>
                                            <a href="#">删除</a>
                                            <a href="#">设为默认</a>
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>

                            <!-- 地址模态框 -->
                            <div class="modal fade" id="addressModel" tabindex="-1" role="dialog" aria-labelledby="loginModelLable">
                                <div class="modal-dialog" role="document">
                                    <div class="modal-content">
                                        <%--密码登录--%>
                                        <div class="tab-pane fade in active" id="pwdReg">
                                            <form id="xxxx" action="#" method="post">
                                                <input type="hidden" name="action" value="xxx">
                                                <div class="modal-body">
                                                    <div class="form-group">
                                                        <label>姓名</label>
                                                        <input type="text" class="form-control" name="name"
                                                               placeholder="姓名">
                                                    </div>
                                                    <div class="form-group">
                                                        <label>地址</label>
                                                        <input type="text" class="form-control" name="address"
                                                               placeholder="请输入地址">
                                                    </div>
                                                    <div class="form-group">
                                                        <label>联系电话</label>
                                                        <input type="text" class="form-control" name="telephone"
                                                               placeholder="联系电话">
                                                    </div>
                                                </div>
                                                <div class="modal-footer">
                                                    <input type="button" class="btn btn-default" data-dismiss="modal"  value="关闭">
                                                    <input type="button" class="btn btn-primary" value="保存"/>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!--导入底部-->
<div id="footer">
</div>
</div>

</body>
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<!--导入布局js，共享header和footer-->
<script type="text/javascript" src="js/include.js"></script>
<script src="js/vue.js"></script>
<script src="js/axios-0.18.0.js"></script>
<script type="module">
    /*引入getUser方法*/
    import {getUser} from "./js/login.js";

    new Vue({
        el:"#app",
        data:{
            user:{}
        },
        methods:{
            findAddressByUser(){
                alert(this.user.uid)
            }
        },
        created(){
            getUser().then(res=>{
                this.user = res.data;
                this.findAddressByUser();
            });

        }
    })
</script>
</html>
